<template>
  <div class="app-container">
      我的实训单位
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="当前实训单位信息" name="first">
            <div v-if="company!==undefined&&company!==''">
              <el-card shadow="always">
                当前实训信息状态：{{internshipStatus}}
                <div v-if="company.internshipStatus===2">
                  驳回原因：{{company.reject}}
                  请修改信息后重新提交
                </div>
                <!--审核通过与审核中显示的信息-->
                <div  v-if="company.internshipStatus!==2">
                <el-form :model="company">
                  <el-form-item label="实训单位名称" :label-width="formLabelWidth">
                    <el-input v-model="company.internshipName" autocomplete="off" :disabled="true"></el-input>
                  </el-form-item>
                  <el-row  :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="实训单位类型" :label-width="formLabelWidth"><br>
                        <el-select v-model="internshipType" placeholder="实训单位类型"  :disabled="true">
                          <el-option label="校内培训" value="0"></el-option>
                          <el-option label="校外培训" value="1"></el-option>
                          <el-option label="校外实习" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="实训单位地址" :label-width="formLabelWidth">
                        <el-input v-model="company.internshipAddress" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="实训描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="company.content" autocomplete="off" :disabled="inputdisabled"></el-input>
                  </el-form-item>
                  <el-row  :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="实训导师姓名" :label-width="formLabelWidth">
                        <el-input v-model="company.tutor" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="实训导师手机号码" :label-width="formLabelWidth">
                        <el-input v-model="company.tutorPhone" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div v-if="company.internshipType===1||company.internshipType===2">
                  <el-row  :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="实习协议" :label-width="formLabelWidth">
                        <img v-if="company.contract" :src="company.contract" class="avatar">
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="实习照片" :label-width="formLabelWidth">
                        <img v-if="company.photo" :src="company.photo" class="avatar">
                      </el-form-item>
                    </el-col>
                  </el-row>
                  </div>
                </el-form>
                </div>
                <!--实训信息驳回后显示的信息-->
                <div v-if="company.internshipStatus===2">
                  <el-form :model="company">
                  <el-form-item label="实训单位名称" :label-width="formLabelWidth">
                    <el-input v-model="company.internshipName" autocomplete="off" :disabled="true"></el-input>
                  </el-form-item>
                  <el-row  :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="实训单位类型" :label-width="formLabelWidth"><br>
                        <el-select v-model="internshipType" placeholder="实训单位类型"  :disabled="true">
                          <el-option label="校内培训" value="0"></el-option>
                          <el-option label="校外培训" value="1"></el-option>
                          <el-option label="校外实习" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="实训单位地址" :label-width="formLabelWidth">
                        <el-input v-model="company.internshipAddress" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="实训描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="company.content" autocomplete="off" :disabled="inputdisabled"></el-input>
                  </el-form-item>
                  <el-row  :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="实训导师姓名" :label-width="formLabelWidth">
                        <el-input v-model="company.tutor" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="实训导师手机号码" :label-width="formLabelWidth">
                        <el-input v-model="company.tutorPhone" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div v-if="company.internshipType===1||company.internshipType===2">
                  <el-row  :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="实习协议" :label-width="formLabelWidth">
                        <el-upload
                          class="avatar-uploader"
                          :action="actionUrl"
                          :show-file-list="false"
                          :on-success="editContract"
                          :before-upload="beforeAvatarUpload"
                          :disabled="inputdisabled">
                          <img v-if="company.contract" :src="company.contract" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="实习照片" :label-width="formLabelWidth">
                        <el-upload
                          class="avatar-uploader"
                          :action="actionUrl"
                          :show-file-list="false"
                          :on-success="editPhoto"
                          :before-upload="beforeAvatarUpload"
                          :disabled="inputdisabled">
                          <img v-if="company.photo" :src="company.photo" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  </div>
                </el-form>
                </div>
              </el-card>
              <div v-if="inputdisabled" >
                <el-row :gutter="20">
                  <el-col :span="4" :offset="10">
                    <div>
                      <el-button  type="primary" @click="inputdisabled = false">修改</el-button>
                    </div>
                  </el-col>
                  <el-col :span="4" :offset="6">
                    <div v-if="company.internshipStatus===1">
                      <el-popconfirm  v-if="inputdisabled"  title="确定解除绑定吗？" @onConfirm="cancelCompany()">
                        <el-button type="primary" slot="reference">解除绑定</el-button>
                      </el-popconfirm>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-if="!inputdisabled">
                <el-row :gutter="20">
                  <el-col :span="6" :offset="10">
                    <el-button type="primary" @click="editMyCompany" >确定</el-button>
                    <el-button type="primary" @click="inputdisabled = true" >取消</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div v-if="company===undefined||company===''">
              你还没有绑定实训单位哦！
              <el-button type="primary" @click="addCompanyDisabled = true" >填写实训单位信息</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="历史实训单位" name="second">历史实训单位
            <el-timeline>
              <el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.startTime" placement="top">
                <el-card>
                  <h4>{{ item.internshipName }}</h4>
                  <p>{{ item.content }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      <el-dialog title="填写实训单位信息" :visible.sync="addCompanyDisabled">
          <el-form :model="myCompany">
            <el-form-item label="实训单位名称" :label-width="formLabelWidth">
              <el-input v-model="myCompany.internshipName" autocomplete="off"></el-input>
            </el-form-item>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实训单位类型" :label-width="formLabelWidth">
                  <el-select v-model="myCompany.internshipType" placeholder="实训单位类型">
                    <el-option label="校内培训" value="0"></el-option>
                    <el-option label="校外培训" value="1"></el-option>
                    <el-option label="校外实习" value="2"></el-option>
                  </el-select>
                </el-form-item>
               </el-col>
              <el-col :span="10">
                <el-form-item label="实训单位地址" :label-width="formLabelWidth">
                  <el-input v-model="myCompany.internshipAddress" autocomplete="off"></el-input>
                </el-form-item>
               </el-col>
            </el-row>
            <el-form-item label="实训描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="myCompany.content" autocomplete="off"></el-input>
            </el-form-item>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实训导师姓名" :label-width="formLabelWidth">
                  <el-input v-model="myCompany.tutor" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="实训导师手机号码" :label-width="formLabelWidth">
                  <el-input v-model="myCompany.tutorPhone" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row  :gutter="20">
              <el-col :span="10">
                <el-form-item label="实习协议" :label-width="formLabelWidth">
                  <el-upload
                    class="avatar-uploader"
                    :action="actionUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessContract"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="myCompany.contract" :src="myCompany.contract" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                 <el-form-item label="实习照片" :label-width="formLabelWidth">
                  <el-upload
                    class="avatar-uploader"
                    :action="actionUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessPhoto"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="myCompany.photo" :src="myCompany.photo" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                 </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addCompanyDisabled = false">取 消</el-button>
            <el-button type="primary" @click="choiceCompany()">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
 import { getMyCompany,editMyCompany ,choiceCompany} from '@/api/company'
 import { getCompanyHistory,cancelCompany } from '@/api/binding'
 import { deepClone } from '@/utils'
export default {
  data() {
    return {
      activeName: 'first',
      timeline: [],
      company:{
        siId:'',
        internshipId:'',
        internshipName:'',
        internshipType:'',
        pictureUrl1:'',
        detail:'',
        address:'',
        tutor:'',
        tutorPhone:'',
        createTime:''
      },
      inputdisabled:true,
      addCompanyDisabled:false,
      myCompany:{
        internshipName:'',
        internshipType:'',
        content:'',
        internshipAddress:'',
        tutor:'',
        tutorPhone:'',
        contract:'',
        photo:'',
      },
      param:{
        studentAccount:this.$store.state.user.userAccount
      },
      actionUrl:process.env.VUE_APP_BASE_UPLOAD
    }
  },
  computed:{
    internshipStatus:function () {
      if(this.company.internshipStatus===0){
        return '待审核'
      }else if(this.company.internshipStatus===1){
        return '审核通过'
      }else if(this.company.internshipStatus===2){
        return '驳回'
      }else{
        return '未定义'
      }
    },
    internshipType:function (){
      if(this.company.internshipType===0){
        return '校内合作实训单位'
      }else if(this.company.internshipType===1){
        return '校外合作实训单位'
      }else if(this.company.internshipType===2){
        return '非合作实训单位'
      }else{
        return '未定义'
      }
      }
  },
  //页面打开时执行的方法
  created() {
    this.getMyCompany()
    this.getCompanyHistory()
  },
  methods: {
    async getCompanyHistory() {
      let res = await getCompanyHistory(this.param);
      this.timeline = res.beans;
    },
     async getMyCompany(){
        let res = await getMyCompany();
         this.company = res.bean||''
      },
      async editMyCompany(){
        let res = await editMyCompany(this.company).then(()=>{
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.inputdisabled = true;
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '修改失败!'
            })
        })

      },
      async cancelCompany(){
        let res = await cancelCompany().then(()=>{
            this.$message({
              type: 'success',
              message: '解除绑定成功!'
            })
            this.getCompanyHistory()
            this.activeName = 'second'
            this.company=''
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '解除绑定失败!'
            })
        })

      },
      editContract(res, file) {
        this.company.contract = res.bean.url
      },
      editPhoto(res, file) {
        this.company.photo = res.bean.url
      },
      handleAvatarSuccessContract(res, file) {
        this.myCompany.contract = res.bean.url
      },
      handleAvatarSuccessPhoto(res, file) {
        this.myCompany.photo = res.bean.url
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      async choiceCompany(){
        await choiceCompany(this.myCompany).then(()=>{
            this.$message({
              type: 'success',
              message: '选报成功!'
            })
            this.addCompanyDisabled = false
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '选报失败!'
            })
            })
      },
    },
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 150px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 200px;
    height: 150px;
    display: block;
  }
</style>
